import * as React from "react";

import "./index.scss";

export interface AreaProps {
  onRemove(index: number): void;
  c?: string;
  items?: string[];
}

export class Area extends React.Component<AreaProps, {}> {
  constructor(props: AreaProps) {
    super(props);
  }

  render() {
    return (
      <div className={`area ${this.props.c}`}>
        {this.props.items &&
          this.props.items.map((item, i) => (
            <div key={i} className="item">
              <span>{item}</span>
              <div className="remove" onClick={() => this.props.onRemove(i)}>
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M5.15069 4.12791C5.07763 4.05486 5.07763 3.94527 5.15069 3.87221L7.89041 1.13248C7.96347 1.05942 8 0.949833 8 0.876773C8 0.803714 7.96347 0.694125 7.89041 0.621066L7.379 0.10965C7.30594 0.0365907 7.19635 6.10352e-05 7.12329 6.10352e-05C7.0137 6.10352e-05 6.94064 0.0365907 6.86758 0.10965L4.12785 2.84938C4.05479 2.92244 3.94521 2.92244 3.87215 2.84938L1.13242 0.10965C1.05936 0.0365907 0.949772 6.10352e-05 0.876712 6.10352e-05C0.803653 6.10352e-05 0.694064 0.0365907 0.621005 0.10965L0.109589 0.621066C0.0365297 0.694125 0 0.803714 0 0.876773C0 0.949833 0.0365297 1.05942 0.109589 1.13248L2.84932 3.87221C2.92237 3.94527 2.92237 4.05486 2.84932 4.12791L0.109589 6.86764C0.0365297 6.9407 0 7.05029 0 7.12335C0 7.19641 0.0365297 7.306 0.109589 7.37906L0.621005 7.89047C0.694064 7.96353 0.803653 8.00006 0.876712 8.00006C0.949772 8.00006 1.05936 7.96353 1.13242 7.89047L3.87215 5.15075C3.94521 5.07769 4.05479 5.07769 4.12785 5.15075L6.86758 7.89047C6.94064 7.96353 7.05023 8.00006 7.12329 8.00006C7.19635 8.00006 7.30594 7.96353 7.379 7.89047L7.89041 7.37906C7.96347 7.306 8 7.19641 8 7.12335C8 7.05029 7.96347 6.9407 7.89041 6.86764L5.15069 4.12791Z"
                    fill="#333333"
                  />
                </svg>
              </div>
            </div>
          ))}
      </div>
    );
  }
}
